"use client"

import { View, Text, StyleSheet, TouchableOpacity, Platform } from "react-native"
import { Edit } from "lucide-react-native"
import { theme } from "../../constants/theme"
import { useRouter } from "expo-router"

interface FavoriteCollectionProps {
    collection: {
        id: string
        title: string
        tag?: string
        count: number
        color: string
        isDefault?: boolean
    }
    onPress: () => void
    onEdit: (collection: any) => void
}

export function FavoriteCollection({ collection, onPress, onEdit }: FavoriteCollectionProps) {
    const router = useRouter()
    return (
        <TouchableOpacity style={styles.container} onPress={onPress} activeOpacity={0.8}>
            <View style={[styles.bookCover, { backgroundColor: collection.color }]}>
                {/* 标签 */}
                {collection.tag && (
                    <View style={styles.tagContainer}>
                        <Text style={styles.tagText}>{collection.tag}</Text>
                    </View>
                )}

                {/* 书本内容 */}
                <View style={styles.bookContent}>
                    <Text style={styles.bookTitle} numberOfLines={1}>
                        {collection.title}
                    </Text>
                    <Text style={styles.bookCount}>{collection.count}词</Text>
                </View>

                {/* 书本装饰 */}
                <View style={styles.bookPattern}>
                    <View style={styles.patternLine} />
                    <View style={styles.patternLine} />
                    <View style={styles.patternLine} />
                </View>
            </View>

            {/* 编辑按钮 - 默认收藏本不显示 */}
            {!collection.isDefault && (
                <TouchableOpacity
                    style={styles.editButton}
                    onPress={(e) => {
                        e.stopPropagation()
                        router.push({
                            pathname: "/collection-edit-screen",
                            params: {
                                id: collection.id,
                                title: collection.title,
                            },
                        })
                    }}
                >
                    <Edit size={12} color={theme.colors.neutral.gray} />
                </TouchableOpacity>
            )}
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    container: {
        width: "30%", // Changed from 48% to 30% to fit more in a row
        marginBottom: theme.spacing.md,
        position: "relative",
    },
    bookCover: {
        aspectRatio: 0.8, // Adjusted ratio to make it slightly taller
        borderRadius: theme.borderRadius.medium,
        padding: theme.spacing.sm, // Reduced padding
        position: "relative",
        overflow: "hidden",
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.2)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.5,
                shadowRadius: 4,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    tagContainer: {
        position: "absolute",
        top: 0,
        right: 0,
        backgroundColor: "#FFD700",
        paddingHorizontal: theme.spacing.xs, // Reduced padding
        paddingVertical: 2, // Reduced padding
        borderBottomLeftRadius: theme.borderRadius.small,
        borderTopRightRadius: theme.borderRadius.medium,
    },
    tagText: {
        fontSize: 8, // Reduced font size
        fontWeight: theme.fontWeight.semiBold,
        color: "#7A5C00",
    },
    bookContent: {
        flex: 1,
        justifyContent: "space-between",
    },
    bookTitle: {
        fontSize: theme.fontSize.sm, // Reduced font size
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.white,
        marginTop: theme.spacing.sm,
    },
    bookCount: {
        fontSize: 10, // Reduced font size
        color: "rgba(255, 255, 255, 0.8)",
        alignSelf: "flex-end",
    },
    bookPattern: {
        position: "absolute",
        bottom: 30, // Adjusted position
        right: 0,
        opacity: 0.2,
    },
    patternLine: {
        width: 30, // Reduced size
        height: 6, // Reduced size
        backgroundColor: "rgba(0, 0, 0, 0.2)",
        marginBottom: 3, // Reduced margin
        borderTopLeftRadius: 3,
        borderBottomLeftRadius: 3,
    },
    editButton: {
        position: "absolute",
        top: 5,
        right: 5,
        width: 18, // Reduced size
        height: 18, // Reduced size
        borderRadius: 9,
        backgroundColor: "rgba(255, 255, 255, 0.8)",
        alignItems: "center",
        justifyContent: "center",
        zIndex: 10,
    },
})

